<template>
	<view class="content">
		
		<!-- #ifdef H5 -->
			<uni-nav-bar left-icon="back" left-text="返回" @clickLeft="backLastPage" class="nav-bar" title="酒店">
				
			</uni-nav-bar>
		<!-- #endif -->
		<!-- 状态栏高度 -->
		<!-- <view class="status_bar"></view> -->
		<!-- banner -->
		<view class="banner">
			<!-- 放广告 -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../users/static/wechat_login.png"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../users/static/wechat_login.png"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 酒店筛选器 -->
		<view class="xz-hotel">
			<view class="hotel-header">
				<view class="xz-item"> 
					<text>酒店</text>
				</view>
				<view class="xz-item">
					<text>钟点房</text>
				</view>
				
			</view>

			<!-- 选项下面的部分 -->
			<view class="hotel-body">
				<view class="position">
					<text>包头昆都仑区博学路</text> 
					<view class="gps">
						
							<image src="../../../static/img/hotel/gps.png"></image>
						
							<text>我的位置</text>
						
					</view>
				</view>
				<!-- 日期选择 -->
				<view class="date-picker" @click="choseTime" v-if="choiceDate.length">
					<view class="date">
						<text>周{{choiceDate[0].week}}入住</text>
						<text>{{choiceDate[0].re}}</text>
					</view>
					<view class="night-num">
						<text>{{dayCount}}晚</text>
					</view>
					<view class="date">
						<text>周{{choiceDate[1].week}}离店</text>
						<text>{{choiceDate[1].re}}</text>
					</view>
				</view>
				
				<view class="search1">
					<input type="text" v-model="searchKey" placeholder="试试搜：关键字/位置/品牌/酒店名">
				</view>  
				
				<view class="btn-search">
					<button type="default" @click="gotoSearchResult()">开始搜索</button>
				</view>
			</view>
		</view>


		<view class="tabbar" @click="gotoTabbarPage">
			<!-- 业务服务 -->
			
			
			<u-grid :col="4" :border="false">
				
				<u-grid-item v-for="item, index in tabbar" :key="index" @click="gotoTabbarPage(item.name)">
					<u-icon color="success" :name="item.icon" :size="46"></u-icon>
					<view class="grid-text">{{item.name}}</view>
				</u-grid-item>
				
			</u-grid>
			
		</view>
		
		<!-- 酒店推荐 -->
		<view class="recommend-hotel u-m-t-20">
			<view class="title">
				<text>酒店推荐</text>
			</view>
		</view>
		
		<u-waterfall v-model="recommend" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="gotoHotelDeatil(item)">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.storeName}}
					</view>
					<view class="demo-price">
						{{item.price}}元
					</view>
					<view class="demo-tag">
						<view class="demo-tag-owner">
							自营
						</view>
						<view class="demo-tag-text">
							放心购
						</view>
					</view>
					<!-- <view class="demo-shop">
						{{item.shop}}
					</view> -->
					<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
				</view>
				
			</template>
			<template v-slot:right="{rightList}">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="gotoHotelDeatil(item)">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.storeName}}
					</view>
					<view class="demo-price">
						{{item.price}}元
					</view>
					<view class="demo-tag">
						<view class="demo-tag-owner">
							自营
						</view>
						<view class="demo-tag-text">
							放心购
						</view>
					</view>
					<!-- <view class="demo-shop">
						{{item.shop}}
					</view> -->
					<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
		<!-- 日期选择插件 -->
		<!--          监听日期改变的事件，  设置无界面            控制日期显示 --> 
		<date-picker @change="changeDate" :modal="true" :show="showCaledar"></date-picker>
	</view>
</template>

<script>
	import DatePicker from '@/components/date-picker/date-picker.vue'
	import MyGrid from '@/components/mygrid.vue'
	import {hotelRecommend} from '../../../api/hotel.js'
	
	export default {
		components: {  
			DatePicker,
			MyGrid, 
			
		},
		onLoad() {
			this.getHotelRecommend()
		},
		data() {
			return {
				tabbar: [
					{
						name: '历史',
						icon: 'clock'
					}, 
					{
						name: '优惠卷',
						icon: 'coupon'
					},
					{
						name: '收藏',
						icon: 'heart'
					},
					{
						name: '订单',
						icon: 'order'
					}
				],
				showCaledar: false,
				choiceDate: [],
				dayCount: 0,
				
				searchKey: '',
				page: 1,
				limit: 20,
				totalPage: null,
				loadStatus: "loadmore",
				
				itemArr: [
					{
						url: '',
						icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg",
						text: '优惠卷',
					},
					{
						url: '',
						icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg.dpg",
						text: '收藏',
					},
					{
						url: '',
						icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg.dpg",
						text: '足迹',
					},
					
					{
						url: '',
						icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg",
						text: '酒店订单',
					},
					
				],
				recommend: [
					
				]
			}
		},
		methods: {
			
			// 获取酒店推荐数据
			async getHotelRecommend() {
				const params = {
					page: this.page,
					limit: this.limit,
				}
				const res = await hotelRecommend(params)
				this.recommend = [...this.recommend, ...res.data.list]
				if (this.totalPage == null) this.totalPage = res.data.totalPage
				console.log(res)
			},
			// 去对应的tabbar页面
			gotoTabbarPage(name,te) {
				console.log(name)
				if (name == "订单") {
					this.$u.route({
						url: '/pages/hotel/hotelOrder/hotelOrder'
					})
				}
			},
			// 清除瀑布流数组
			clearWaterFall() {
				this.$refs.uWaterfall.clear()
			},
			
			// 控制选择器的弹出和显示
			choseTime() {
				
				this.showCaledar = !this.showCaledar
				
			},
			// 捕获子组件传递过来的参数
			changeDate({choiceDate, dayCount}) {
				// console.log(choiceDate + " " + dayCount)
				this.choiceDate = choiceDate
				this.dayCount = dayCount
				// this.dateStr = '入住从 ' + choiceDate[0].re + ' (星期' + choiceDate[0].week + ')  到 ' + choiceDate[1].re + '(星期' + choiceDate[1].week + ')' + '  共 ' + dayCount + ' 晚 ';
				// console.log(this.dateStr)
			},
			// 跳转到酒店搜索页面
			gotoSearchResult() {
				uni.navigateTo({
					url: '/pages/hotel/hotelSearchResult/hotelSearchResult?'
					+ "searchKey=" + this.searchKey
					+ "&choiceDate=" + this.choiceDate
				})
			},
			
			// 返回上一页
			backLastPage() {
				uni.navigateBack({
					delta:1
				})
			},
			// 跳转到酒店详情页面
			gotoHotelDeatil(item) {
				// console.log(123)
				console.log(item)
				
				uni.navigateTo({
					url:'/pages/hotel/hotelDeatil/hotelDeatil?id=' + item.id 
				})
			},
		},
		// 到达底部加载更多
		onReachBottom() {
			// 重新请求数据加上分页参数
			
			if (this.page >= this.totalPage) {
				this.loadStatus = 'nomore'
				return;
			}
			this.loadStatus = 'loading';
			this.page  += 1;
			this.getCategoryGoodsList()
			this.loadStatus = 'loadmore';
			
		}
	}
</script>

<style lang="scss" scoped>
	
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}
	
	.demo-tag {
		display: flex;
		margin-top: 5px;
	}
	
	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}
	
	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
	
	// 分割线
	
	.content {
		/* margin: 0 20rpx; */
		width: 100%;
		
		.nav-bar {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 2;
			
			
		}
		margin-top: 100rpx;
		// banner
		.banner {
			width: 100%;
			height: 350rpx;
			swiper {
				height: 100%;
				.swiper-item {
					width: 100%;
					height: 100%;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			
		}
		
		.xz-hotel {
			
			margin: 0 20rpx;
			margin-top: 50rpx;
			
			// margin-top: 400rpx;
			background: #FFFFFF;  
			height: 500rpx;
			border-radius: 30rpx;
			overflow: hidden;
			.hotel-header {
				width: 100%;
				height: 100rpx;
				// background: #C0C0C0;
				background-color: rgba(255, 255, 25, 0.5);
				
				display: flex;
				align-items: center;
				justify-content: left;
				
				.xz-item {
					width: 20%;
					height: 100%;
					display: flex;
					align-items: center;
					background-color: #FFFFFF;
					
					text {
						margin: 0 auto;
					}
				}
			}
			
			.hotel-body {
				// width: 100%;
				margin: 0 40rpx;
				margin-top: 40rpx;
				
				.position {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					text {
						font-size: 40rpx;
						font-weight: 700;
					}
					
					.gps {
						display: flex;
						flex-direction: column;
						align-items: center;
						image {
							width: 30rpx;
							height: 30rpx;
						}
						
						text {
							font-size: 20rpx;
							font-weight: 100;
						}
					}
					
				}
				
				.date-picker {
					width: 100%;
					margin-top: 30rpx;
					
					display: flex;
					justify-content: left;
					// justify-content: center;
					align-items: center;
					
					.date {
						display: flex;
						flex-direction: column;
						// align-items: center;	
						text {
							font-size: 30rpx;
							font-weight: 700;
						}
						
						text:nth-child(1) {
							font-size: 16rpx;
							color: #C0C0C0;
							font-weight: 100;
						}
						
					}
					
					.night-num {
						margin: 0 80rpx;	
						text {
							font-size: 25rpx;
						}
					}
				}
			
				.search1 {
					width: 100%;
					margin-top: 20rpx;
					text {
						font-size: 25rpx;
						color: #C0C0C0;
					}
				}
				
				.btn-search {
					width: 100%;
					
					margin-top: 30rpx;

					// overflow: hidden;
					
					button {
						color: #FFFFFF;
						font-weight: 700;
						text-align: center;
						line-height: 70rpx;
						height: 70rpx;
						background-color: $u-type-success;
					}
				}
			}
		}
	
		.tabbar {
			width: 100%;
			margin-top: 40rpx;
		}
		
		.recommend-hotel {
			margin: 0 20rpx;
			.title {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				text {
					font-size: 35rpx;
					font-weight: 700;
				}
			}
			
			.waterfalls-flow {
				width: 100%;
				margin-top: 40rpx;
			}
		}
	}
</style>
